﻿@page "/posts/{id?}"
@inject ApiHelper apiHelper
@{
	var id = Model.RouteData.Values["id"]?.ToString()??"";

	var info = await apiHelper.GetArticleAsync($"/posts/{id}");
	ViewData["title"] = info.Title;
	ViewData["description"] = info.Title;
}


<div class="section">
	<div class="container">
		
		<div class="row">
			<div class="col-12">
				<div class="news-post">
					<header class="news-post-header">
						<h1 class="news-post-title">@info.Title</h1>
						<div class="news-post-meta">
							<div class="news-post-meta-item">
								<i class="material-icons md-22">access_time</i>
								<span> @info.CreatedAt </span>
							</div>
							<div class="news-post-meta-item">
								<span>by &nbsp;</span>
								<a href="#!"></a>
							</div>
							<div class="news-post-meta-item">
								<i class="material-icons md-20">chat_bubble</i>
								<span></span>
							</div>
						</div>
						<div class="news-post-img img-style">
							<img data-src="/public/img/news-post.jpg" class="lazy" src="" alt="">
							<img data-src="@info.FeatureImage" class="lazy" src="@info.FeatureImage" alt="">
						</div>
					</header>

					@Html.Raw(info.Html)

					<footer class="news-post-footer">
						<div class="row align-items-center justify-content-between items">
							<div class="col-md col-12 item">
								<ul class="news-post-cat">
									<li><a href="#!">Startup</a></li>
									<li><a href="#!">Software Development</a></li>
								</ul>
							</div>
							<div class="col-md-auto col-12 item">
								<div class="news-post-share">
									<p class="news-post-share-title">Share</p>
									<ul class="page-social-links">
										<li>
											<a href="#!" title="Facebook">
												<svg viewBox="0 0 320 512">
													<use xlink:href="/public/img/sprite.svg#facebook-icon"></use>
												</svg>
											</a>
										</li>
										<li>
											<a href="#!" title="Instagram">
												<svg viewBox="0 0 448 512">
													<use xlink:href="/public/img/sprite.svg#instagram-icon"></use>
												</svg>
											</a>
										</li>
										<li>
											<a href="#!" title="LinkedIn">
												<svg viewBox="0 0 448 512">
													<use xlink:href="/public/img/sprite.svg#linkedin-icon"></use>
												</svg>
											</a>
										</li>
										<li>
											<a href="#!" title="Twitter">
												<svg viewBox="0 0 512 512">
													<use xlink:href="/public/img/sprite.svg#twitter-icon"></use>
												</svg>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</footer>

				</div>
			</div>
		</div>
	</div>
</div>

@section css{
	<style>
		main {
			margin: auto;
			padding: 1rem;
			width: 800px;
			max-width: calc(100% - 2rem);
			color: white;
			font-size: 20px;
			line-height: 1.6;
		}

		.astro-a {
			position: absolute;
			top: -32px;
			left: 50%;
			transform: translatex(-50%);
			width: 220px;
			height: auto;
			z-index: -1;
		}

		h1 {
			font-size: 4rem;
			font-weight: 700;
			line-height: 1;
			text-align: center;
			margin-bottom: 1em;
		}

		.text-gradient {
			background-image: var(--accent-gradient);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-size: 400%;
			background-position: 0%;
		}

		.instructions {
			margin-bottom: 2rem;
			border: 1px solid rgba(var(--accent-light), 25%);
			background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
			padding: 1.5rem;
			border-radius: 8px;
		}

			.instructions code {
				font-size: 0.8em;
				font-weight: bold;
				background: rgba(var(--accent-light), 12%);
				color: rgb(var(--accent-light));
				border-radius: 4px;
				padding: 0.3em 0.4em;
			}

			.instructions strong {
				color: rgb(var(--accent-light));
			}

		.link-card-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
			gap: 2rem;
			padding: 0;
		}
	</style>

}